import React from 'react';
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Button, Col, Form, Input, Row, Modal, message } from 'antd'
const confirm = Modal.confirm
const FormItem = Form.Item
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
  style: {
    marginBottom: 10
  }
}

const Filter = ({
  selectedRowKeys,
  onFilterChange,
  handleOnChange,
  showModal,
  dimension,
  orderType,
  adAcquireType,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  } }) => {

  const handleSubmit = () => {
    let fields = getFieldsValue()
    let data = {}
    if (fields.dimension === 'orderType') {
      data.orderType = fields.orderType
    } else {
      data.adAcquireType = fields.adAcquireType
    }
    onFilterChange(data)
  }

  const handleFormReset = () => {
    const fields = getFieldsValue()
    fields.orderType = null
    fields.adAcquireType = null
    fields.dimension = dimension
    setFieldsValue(fields)
    handleSubmit()
  }

  const handleSetPermission = () => {
    showModal()
  }

  const handleDeletePersonalSetting = () => {
    if (selectedRowKeys.length === 0) {
      message.error("请选择一个微信号")
      return
    }
    confirm({
      title: '温馨提示',
      content: '确定要删除个人配置吗？删除后将使用全局配置',
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  return (
    <div>
      <Row gutter={24}>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="运营微号">
            {getFieldDecorator('wxId')(<Input style={{ width: "100%" }} placeholder="运营微号" />)}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="微信昵称">
            {getFieldDecorator('nickname')(<Input style={{ width: "100%" }} placeholder="微信昵称" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <div>
            <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
            <Button className="margin-right" onClick={handleFormReset}>重置</Button>
            <Button className="margin-right" onClick={handleSetPermission}>设置授权</Button>
            <Button onClick={handleDeletePersonalSetting}>删除个人设置</Button>
          </div>
        </Col>
      </Row>
    </div >
  )
}

Filter.propTypes = {
  onFilterChange: PropTypes.func
}
export default Form.create()(Filter)
